<template>
    <div>
      <el-card>
        <el-page-header content="业主账号列表" icon="" title="业主账号管理" />
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="username" label="账户名" width="180" />
            <el-table-column prop="password" label="密码" width="180" />
            <el-table-column prop="propname" label="名字" width="180" />
            <el-table-column prop="building" label="楼号" width="180" />
            <el-table-column prop="roomnumber" label="房号" width="180" />
  
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.row)">
                <!--scope.row当前这个对象-->
                编辑
              </el-button>
              
              <el-popconfirm
                title="你确定要删除吗？"
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="handleDelete(scope.row)"
                >、
                <template #reference>
                  <el-button size="small" type="danger" @click=""> 删除 </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
  
      <el-dialog
        v-model="dialogVisible"
        title="编辑用户"
        width="50%"
  
      >
      <el-form
        ref="propFormRef"
        :model="propForm"
        :rules="propFormRules"
        label-width="80px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
      <el-form-item label="账户名" prop="username">
      <el-input v-model="propForm.username" />
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input v-model="propForm.password" />
    </el-form-item>

      <el-form-item label="业主名字" prop="propname">
      <el-input v-model="propForm.propname" />
    </el-form-item>

    <el-form-item label="楼号" prop="building">
        <el-select
          v-model="propForm.building"
          class="m-2"
          placeholder="Select"
          style="width: 100%"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="房号" prop="roomnumber">
        <el-select
          v-model="propForm.roomnumber"
          class="m-2"
          placeholder="Select"
          style="width: 100%"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>




  
      </el-form>
  
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleEditConfirm()"> 确认 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted,reactive } from "vue";
  import axios from "axios";
  
  const dialogVisible = ref(false)
  const tableData = ref([]);
  const propFormRef = ref();
  onMounted(() => {
    getTableData();
  });

  const getTableData = async () => {
    const res = await axios.get("/adminapi/prop/getaccount");

    tableData.value = res.data.data;
  };
  
  const propForm = reactive({
    username:"",
    password:"",
    propname: "",
    building: 1,
    roomnumber: 101,

});


//下拉选项
const options1 = [
  {
    label: "1#",
    value: 1,
  },
  {
    label: "2#",
    value: 2,
  },
  {
    label: "3#",
    value: 3,
  },
];

const options2 = [
  {
    label: "101",
    value: 101,
  },
  {
    label: "102",
    value: 102,
  },
  {
    label: "201",
    value: 201,
  },
  {
    label: "202",
    value: 202,
  },
  {
    label: "301",
    value: 301,
  },
  {
    label: "302",
    value: 302,
  },
  {
    label: "401",
    value: 401,
  },
  {
    label: "402",
    value: 402,
  },
]


const propFormRules = reactive({
  username: [{ required: true, message: "请输入名字", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  propname: [{ required: true, message: "请输入业主名字", trigger: "blur" }],
  building: [{ required: true, message: "请选择楼号", trigger: "blur" }],
  roomnumber: [{ required: true, message: "请选择房号", trigger: "blur" }],
});
  
  
  //拿到当前节点数据显示在界面 
  const handleEdit = async data=> {
    
      const res = await axios.get(`/adminapi/prop/getaccount/${data._id}`)
      Object.assign(propForm,res.data.data[0])
      dialogVisible.value = true
  };
  //编辑确认回调
  const handleEditConfirm  =  ()=>{
      propFormRef.value.validate(async (valid)=>{
          if (valid){ //校验通过
              // 1.更新后端
              await axios.put(`/adminapi/prop/putaccount/${propForm._id}`,propForm)
              // 2.隐藏
              dialogVisible.value = false
              // 3.获取数据
              getTableData()
          }else{
            console.log("不通过")
          }
      })
  }
  
  const handleDelete = async (data) => {
    console.log(data);
    await axios.delete(`/adminapi/prop/delaccount/${data._id}`);
    getTableData();
  };
  

  </script>
  
  <style lang="scss" scoped>
  .el-table {
    margin-top: 50px;
  }
  </style>
  